<template>
	<view class="page-container">
		<!-- 顶部背景 -->
		<view class="top-bg"></view>
		
		<!-- 状态栏占位 -->
		<view class="sys-head" :style="{ height: sysHeight() + 'px' }"></view>
		
		<!-- 主体内容 -->
		<view class="content">
			<!-- 顶部Logo和标题 -->
			<view class="header-section">
				<image src="/static/logo.png" class="header-logo" mode="aspectFill"></image>
				<view class="header-title">家跟前享老</view>
			</view>
			
			<!-- 用户信息卡片 -->
			<view class="user-card">
				<image :src="userInfo.avatar || '/static/logo.png'" class="avatar" mode="aspectFill"></image>
				<view class="user-info">
					<view class="user-name">{{ userInfo.nickName || '昵称昵称' }}</view>
					<view class="user-register">注册时间：{{ userInfo.registerTime || '2025-08-06' }}</view>
				</view>
			</view>
			
			<!-- 服务项目和积分中心 -->
			<view class="info-cards">
				<view class="info-card service-card" @click="navigateTo('/pagesA/service-list/service-list')">
					<view class="card-left">
						<view class="card-title">服务项目</view>
						<view class="card-subtitle">{{ serviceCount }}个项目</view>
					</view>
					<image src="/static/logo.png" class="card-image" mode="aspectFill"></image>
				</view>
				<view class="info-card points-card" @click="navigateTo('/pagesA/points/points')">
					<view class="card-left">
						<view class="card-title">积分中心</view>
						<view class="card-subtitle">{{ pointsCount }}积分</view>
					</view>
					<image src="/static/logo.png" class="card-image" mode="aspectFill"></image>
				</view>
			</view>
			
			<!-- 我的订单 -->
			<view class="order-section">
				<view class="section-header">
					<view class="section-title">我的订单</view>
					<view class="section-more" @click="navigateTo('/pagesA/order-list/order-list')">
						<text>全部</text>
						<u-icon name="arrow-right" color="#999999" size="12"></u-icon>
					</view>
				</view>
				<view class="order-status-list">
					<view class="order-status-item" v-for="(item, index) in orderStatusList" :key="index" @click="handleOrderStatus(item)">
						<view class="status-icon-wrapper">
							<image :src="item.icon" class="status-icon" mode="aspectFill"></image>
							<view class="status-badge" v-if="item.count > 0">{{ item.count }}</view>
						</view>
						<view class="status-name">{{ item.name }}</view>
					</view>
				</view>
			</view>
			
			<!-- 功能列表 -->
			<view class="function-list">
				<view class="function-item" v-for="(item, index) in functionList" :key="index" @click="handleFunction(item)">
					<view class="function-left">
						<image :src="item.icon" class="function-icon" mode="aspectFill"></image>
						<view class="function-name">{{ item.name }}</view>
					</view>
					<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import { getUserInfo, getServiceCount, getPointsCount, getOrderStatusCount } from '@/api/user.js'

export default {
	data() {
		return {
			// 服务项目数量
			serviceCount: 3,
			// 积分数量
			pointsCount: 5049,
			// 客服电话
			customerPhone: '400-000-0000',
			// 订单状态列表
			orderStatusList: [
				{
					id: 1,
					name: '待付款',
					icon: '/static/logo.png',
					count: 3,
					status: 'unpaid'
				},
				{
					id: 2,
					name: '待使用/配送',
					icon: '/static/logo.png',
					count: 0,
					status: 'pending'
				},
				{
					id: 3,
					name: '待收货',
					icon: '/static/logo.png',
					count: 0,
					status: 'delivery'
				},
				{
					id: 4,
					name: '已完成',
					icon: '/static/logo.png',
					count: 0,
					status: 'completed'
				},
				{
					id: 5,
					name: '已退款',
					icon: '/static/logo.png',
					count: 0,
					status: 'refunded'
				}
			],
			// 功能列表数组
			functionList: [
				{
					id: 1,
					name: '分享中心',
					icon: '/static/logo.png',
					url: '/pagesA/share-center/share-center'
				},
				{
					id: 2,
					name: '地址管理',
					icon: '/static/logo.png',
					url: '/pagesA/address-list/address-list'
				},
				{
					id: 3,
					name: '我的收藏',
					icon: '/static/logo.png',
					url: '/pagesA/my-collection/my-collection'
				},
				{
					id: 4,
					name: '在线客服',
					icon: '/static/logo.png',
					url: 'customer'
				},
				{
					id: 5,
					name: '投诉建议',
					icon: '/static/logo.png',
					url: '/pagesA/feedback/feedback'
				},
				{
					id: 6,
					name: '设置',
					icon: '/static/logo.png',
					url: '/pagesA/settings/settings'
				}
			]
		}
	},
	computed: {
		...mapState({
			userInfo: state => state.userinfo || {}
		})
	},
	onLoad() {
		this.loadData()
	},
	onShow() {
		// 每次显示页面时刷新数据
		this.loadData()
	},
	methods: {
		// 系统状态栏高度
		sysHeight() {
			const systemInfo = uni.getSystemInfoSync()
			return systemInfo.statusBarHeight || 44
		},
		
		// 加载数据
		async loadData() {
			try {
				// 获取用户信息
				this.getUserData()
				// 获取服务项目数量
				this.getServiceData()
				// 获取积分数量
				this.getPointsData()
				// 获取订单状态统计
				this.getOrderStatusData()
			} catch (error) {
				console.error('加载数据失败：', error)
			}
		},
		
		// 获取用户信息
		async getUserData() {
			try {
				const res = await getUserInfo({
					userId: this.$store.state.userid
				})
				if (res.code === 200) {
					this.$store.commit('updateUserinfo', res.data)
				}
			} catch (error) {
				console.error('获取用户信息失败：', error)
			}
		},
		
		// 获取服务项目数量
		async getServiceData() {
			try {
				const res = await getServiceCount({
					userId: this.$store.state.userid
				})
				if (res.code === 200) {
					this.serviceCount = res.data.count || 0
				}
			} catch (error) {
				console.error('获取服务项目数量失败：', error)
			}
		},
		
		// 获取积分数量
		async getPointsData() {
			try {
				const res = await getPointsCount({
					userId: this.$store.state.userid
				})
				if (res.code === 200) {
					this.pointsCount = res.data.points || 0
				}
			} catch (error) {
				console.error('获取积分数量失败：', error)
			}
		},
		
		// 获取订单状态统计
		async getOrderStatusData() {
			try {
				const res = await getOrderStatusCount({
					userId: this.$store.state.userid
				})
				if (res.code === 200) {
					// 更新订单状态列表的数量
					this.orderStatusList.forEach(item => {
						const statusData = res.data.find(d => d.status === item.status)
						if (statusData) {
							item.count = statusData.count
						}
					})
				}
			} catch (error) {
				console.error('获取订单状态统计失败：', error)
			}
		},
		
		// 页面跳转
		navigateTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		
		// 处理功能点击
		handleFunction(item) {
			if (item.url === 'customer') {
				// 联系客服
				uni.showModal({
					title: '联系客服',
					content: `客服电话：${this.customerPhone}`,
					confirmText: '拨打电话',
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: this.customerPhone
							})
						}
					}
				})
			} else {
				this.navigateTo(item.url)
			}
		},
		
		// 处理订单状态点击
		handleOrderStatus(item) {
			uni.navigateTo({
				url: `/pagesA/order-list/order-list?status=${item.status}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	min-height: 100vh;
	background-color: #F6F6F6;
	position: relative;
}

.top-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 280rpx;
	background: linear-gradient(270deg, rgba(254, 235, 255, 1) 0%, rgba(217, 201, 255, 1) 100%);
	filter: blur(18rpx);
}

.sys-head {
	width: 100%;
}

.content {
	position: relative;
	z-index: 2;
	padding: 0 30rpx 40rpx;
}

// 顶部Logo和标题
.header-section {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8rpx 0 20rpx;
	
	.header-logo {
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		margin-right: 12rpx;
	}
	
	.header-title {
		font-size: 36rpx;
		font-weight: 400;
		color: #212121;
		line-height: 40rpx;
	}
}

// 用户信息卡片
.user-card {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
	
	.avatar {
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.user-info {
		flex: 1;
		
		.user-name {
			font-size: 32rpx;
			font-weight: 700;
			color: #140636;
			line-height: 45rpx;
			margin-bottom: 8rpx;
		}
		
		.user-register {
			font-size: 24rpx;
			font-weight: 400;
			color: #140636;
			line-height: 34rpx;
		}
	}
}

// 服务项目和积分中心卡片
.info-cards {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24rpx;
	
	.info-card {
		width: 338rpx;
		height: 160rpx;
		border-radius: 16rpx;
		padding: 24rpx;
		position: relative;
		overflow: hidden;
		
		.card-left {
			position: relative;
			z-index: 2;
			
			.card-title {
				font-size: 32rpx;
				font-weight: 400;
				line-height: 45rpx;
				margin-bottom: 16rpx;
			}
			
			.card-subtitle {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
			}
		}
		
		.card-image {
			position: absolute;
			right: 0;
			top: 8rpx;
			width: 148rpx;
			height: 148rpx;
		}
	}
	
	.service-card {
		background: linear-gradient(0deg, rgba(176, 212, 255, 1) 0%, rgba(240, 250, 255, 1) 83%);
		
		.card-title {
			color: #1580EB;
		}
		
		.card-subtitle {
			color: #335D96;
		}
	}
	
	.points-card {
		background: linear-gradient(180deg, rgba(255, 246, 217, 1) 0%, rgba(255, 205, 156, 1) 100%);
		
		.card-title {
			color: #FF8D1A;
		}
		
		.card-subtitle {
			color: #85512C;
		}
	}
}

// 我的订单
.order-section {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 20rpx 30rpx;
	margin-bottom: 24rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
		
		.section-title {
			font-size: 28rpx;
			font-weight: 400;
			color: #070C38;
			line-height: 30rpx;
		}
		
		.section-more {
			display: flex;
			align-items: center;
			
			text {
				font-size: 24rpx;
				color: #070C38;
				margin-right: 8rpx;
			}
		}
	}
	
	.order-status-list {
		display: flex;
		justify-content: space-between;
		padding: 16rpx 0;
		
		.order-status-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.status-icon-wrapper {
				position: relative;
				margin-bottom: 12rpx;
				
				.status-icon {
					width: 68rpx;
					height: 68rpx;
				}
				
				.status-badge {
					position: absolute;
					top: -4rpx;
					right: -4rpx;
					min-width: 32rpx;
					height: 32rpx;
					padding: 0 8rpx;
					background: #FF0000;
					border-radius: 16rpx;
					border: 2rpx solid #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 30rpx;
				}
			}
			
			.status-name {
				font-size: 24rpx;
				font-weight: 400;
				color: #070C38;
				line-height: 30rpx;
				text-align: center;
			}
		}
	}
}

// 功能列表
.function-list {
	width: 100%;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 0 30rpx;
	margin-bottom: 32rpx;
	
	.function-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F5F7F7;
		
		&:last-child {
			border-bottom: none;
		}
		
		.function-left {
			display: flex;
			align-items: center;
			
			.function-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
			
			.function-name {
				font-size: 28rpx;
				font-weight: 400;
				color: #070C38;
				line-height: 40rpx;
			}
		}
	}
}
</style>

